<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center videoOpen_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub videoOpen_fd0_0'>
				<view class='flex flex-wrap align-center justify-center videoOpen_fd0_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  videoOpen_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='videoOpen_fd0_0_c1_c0'>详情</text>
				</view>
				<view class='flex flex-wrap align-center videoOpen_fd0_0_c0'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#cd962d"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<block v-else>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center" @tap.stop="landscapeOpenFunc(1)">
				<video id="myVideo" :autoplay="true" class='flex  videoOpen_fd1_0' controls='true' webkit-playsinline="true" playsinline="true" x5-video-player-type="h5-page" object-fit="fill" :src="videoUrl" :initial-time="initial_time" @ended="videoEnd"
					@timeupdate="timeUpdate"></video>
			</view>

			<!---flex布局flex布局结束-->
			<view class="ben_fu-jyf-parser_2">
				<view class="content_title">内容简介</view>
				<u-parse :html="videoContent.content"></u-parse>
			</view>
		</block>
		
		<view class="flex flex-direction flex-wrap align-center benben-position-layout flex courseDetails_flex_5">
			<button class='courseDetails_fd5_0' @tap.stpop="saveVideoBtn">下载课件</button>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				"parser2": "这是富文本",
				"aid": "",
				"videoContent": {},
				"isShow": true,
				"initial_time": 0, // 指定播放位置
				"video_real_time": 0,
				"videoUrl": "",
				"videoContext": null,
				"time": "",
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				aid
			} = options
			if (aid !== undefined) this.aid = aid;
			this.getVideoInfo();
		},
		onUnload() {
			this.saveVideo();
			// this.addRecord();
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取视频详情
			getVideoInfo() {
				this.$api.post(global.apiUrls.post649a38efad9e0, {
					aid: this.aid
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.videoContent = res.data.data;
						this.videoUrl = res.data.data.file[0].path;
						if (res.data.data.time) {
							this.initial_time = res.data.data.time;
							this.video_real_time = res.data.data.time;
						} else {
							this.initial_time = 0;
							this.video_real_time = 0;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			//横屏播放
			// landscapeOpenFunc(videoUrl) {
			// 	this.mixinToPlayVideo();
			// },
			// 禁止拖动进度条快进
			timeUpdate: function(e) {
				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = e.detail.duration;
				//实时播放进度 秒数
				var currentTime = parseInt(e.detail.currentTime);
				// that.time = currentTime;
				that.time = Math.ceil(e.detail.currentTime);
				//当前视频进度
				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0) {
					var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
				} else {
					var jump_time = parseInt(that.video_real_time);
				}
				if (isReady == 1) {
					if (currentTime > jump_time && currentTime - jump_time > 3) {
						that.videoContext.seek(that.video_real_time);
						currentTime = that.video_real_time;
						// wx.showToast({
						// 	title: '未完整看完该视频，不能快进',
						// 	icon: 'none',
						// 	duration: 2000
						// });
					}
				}
				that.video_real_time = currentTime; //实时播放进度
			},
			videoEnd() {
				this.saveVideo();
				// this.addRecord();
			},
			// 保存视频观看时长  post649a368d75e14
			saveVideo() {
				if (!this.time) {
					return;
				}
				this.$api.post(global.apiUrls.post649a368d75e14, {
					means_id: this.aid,
					time: this.time
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						uni.$emit('updataVideo');
					}
				})
			},
			// 添加学习记录 
			addRecord() {
				this.$api.post(global.apiUrls.post64910ea324123, {
					means_id: this.aid,
					demand: this.time
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						uni.$emit('updataVideo');
					}
				})
			},
			// 下载视频课件
			saveVideoBtn() {
				let _this = this;
				let id = _this.aid;
				let url = _this.videoContent.file[0].path;
				// #ifdef APP-PLUS
				// let files = uni.getStorageSync('files') ? JSON.parse(uni.getStorageSync('files')) : {}
				// if (files[id]) {
				// 	// 已下载的文件直接打开
				// 	plus.runtime.openFile(files[id], {}, (res) => {
				// 		_this.savePdf();
				// 		// downloadFile()
				// 	})
				// } else {
				// 	downloadFile()
				// }
				downloadFile();
								
				function downloadFile() {
					uni.showLoading({
						title: '下载中'
					})
					const dtask = plus.downloader.createDownload(url, {}, function(d, status) {
						if (status == 200) {
							uni.hideLoading();
							uni.showToast({
								title: '下载成功',
								icon: 'none',
							})
							//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
							//const fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
							// files[id] = d.filename
							// uni.setStorageSync('files', JSON.stringify(files))
							// _this.savePdf();
							// plus.runtime.openFile(d.filename) //选择软件打开文件
						} else {
							//下载失败
							plus.downloader.clear() //清除下载任务
							uni.hideLoading();
							uni.showToast({
								title: '下载失败，请稍后再试',
								icon: 'none',
							})
						}
					})
					dtask.start()
				}
				// #endif
								
				// #ifdef H5
				window.open(url)
				// #endif
				
				
				
				// let _this = this;
				// uni.showLoading({
				// 	title: '加载中...'
				// })
				// uni.downloadFile({
				// 	url: _this.videoContent.file[0].path,
				// 	success: function(res) {
				// 		var filePath = res.tempFilePath;
				// 		uni.hideLoading();
				// 		uni.showToast({
				// 			title: '下载成功',
				// 			icon: 'none'
				// 		})
				// 	},
				// 	fail: function(err) {
				// 		uni.hideLoading();
				// 		uni.showToast({
				// 			title: '课件下载失败，请重试',
				// 			icon: 'none'
				// 		})
				// 	}
				// });
			},
		}
	};
</script>
<style lang="scss" scoped>
	.courseDetails_flex_5 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(48rpx + var(--window-bottom));
	}
	
	.courseDetails_fd5_0 {
		background: rgba(205, 150, 45, 1);
		border-radius: 64rpx 64rpx 64rpx 64rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
	
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: var(--benbenbgColor1);
		background-size: 100% auto !important;
	}

	.videoOpen_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.videoOpen_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 88rpx;
	}

	.videoOpen_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.videoOpen_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.videoOpen_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.videoOpen_fd1_0 {
		width: 750rpx;
		height: 460rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.ben_fu-jyf-parser_2 {
		background-color: #FFFFFF;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;

		.content_title {
			font-size: 32rpx;
			margin-bottom: 24rpx;
		}
	}
</style>